<template>
	<view class="page notice-friend">
		<nav-header title="商品收藏" :show-right="false">
			<template v-slot:left>
				<view @tap="goBack">
					<svg-icon icon="arrowLeft"></svg-icon>
				</view>
			</template>
		</nav-header>
		<view class="friend" v-for="(item,index) in friendList" :key="item.id" @click="goshoppDetail(item.spuId)">
			<view class="friend-item">
				<view class="item-left">
					<view class="fc">
						<view class="img">
							<image class="img" :src="item.picUrl"></image>
						</view>
						<view class="left-text">
							<text class="nickname">{{item.spuName}}</text>
							<!-- <view class="fc">
								<text class="text-sm-Regular">{{item.spuName}}</text>
							</view> -->
						</view>
					</view>
					<view class="price"><span>￥</span>{{fen2yuan(item.price)}}</view>
				</view>
				<!-- <view class="greetings">
					<text class="text-sm-Regular message">{{item.greetings}}</text>
				</view> -->
			</view>
			<up-divider v-if="index!=friendList.length-1" style="margin:unset;"></up-divider>
		</view>
		<view style="margin-top: 50rpx;width: 100%;" v-if="showMore && !loading && friendList.length!=0">
			<button class="brand-btn" @click="getData">更多商品</button>
		</view>
		<view v-if="friendList.length==0" style="margin-top: 50%;">
			<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无数据">
			</up-empty>
		</view>
	</view>
</template>

<script>
	import list from '../../uni_modules/uview-plus/libs/config/props/list';
	import {
		isAllFieldEqual
	} from '../../utils';

	export default {
		data() {
			return {
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0
				},
				friendList: [],
				showMore: true,
				loading:false
			}
		},
		methods: {
			goBack(){
				uni.switchTab({
					url:"/pages/tabbar/mine-new"
				})
			},
			fen2yuan(price) {
				return (price / 100.0).toFixed(2);
			},
			goshoppDetail(id) {
				uni.navigateTo({
					// url: "/pageSubOne/CommodityDetail/CommodityDetail?id=" + id
					url: `/pageSubOne/CommodityDetail/CommodityDetail?id=${id}&from=true`
				})
			},
			getData() {
				this.$http({
					url: '/product/favorite/page',
					method: 'GET',
					data: this.form,
				}).then(res => {
					this.loading=true
					res.list.forEach(item => {
						this.friendList.push(item)
					})
					if (this.friendList.length == res.total) {
						this.showMore = false
					}
					this.form.pageNo++
					this.loading=false
				})
			},
		},
		onShow() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.notice-friend {
		.friend {
			width: 100%;

			.friend-item {
				background-color: white;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 16rpx;
				// align-items: center;

				.item-left {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 12rpx;

					.img {
						width: 150rpx !important;
						height: 150rpx !important;
					}

					.left-text {
						display: flex;
						flex-direction: column;
						gap: 8rpx;
						margin-left: 10rpx;
						font-size: 27rpx;
						color: #6f6f6f;

						.nickname {
							color: #000;
							font-size: 32rpx;
							font-weight: bold;
						}

						.message {
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 450rpx;
						}
					}
				}

				.greetings {
					color: $gray-400;
					padding-bottom: 8rpx;
				}

			}
		}

		.brand-btn {
			background-color: $brand-500;
			color: $white;
			width: 95%;
			border-radius: 50rpx;
			font-size: 28rpx;
		}

		.fc {
			display: flex;
			align-items: center;
			gap: 8rpx;
		}

		.price {
			color: #E63232;
			font-size: 32rpx;
			font-weight: bold;

			span {
				font-size: 16rpx;
			}
		}
	}
</style>